import React, { Component } from 'react'
import PropTypes from 'prop-types'
import HighComponent from './HighComponent'
import getDefaultOptions from '../GenOptions'
class Gdu extends Component {
  componentDidMount() {
    const echart = this.update()
    this.props.callback(echart)
  }
  componentDidUpdate(preProps, preState) {
    this.update()
  }
  update = () => {
    const { echart, start, end, unit } = this.props
    const { result: { dates, gdu, gduDegree, avgGduDegree, avgGdu  } } = this.props
    echart.setOption(
      {
        ...getDefaultOptions(unit ? 'GDU(°C)' : 'GDU(°F)', ['GDU', '历史平均GDU'], dates,[{
          name: 'GDU',
          smooth: true,
          itemStyle: {
            normal: {
              color: '#228B22',
              lineStyle: {
                width: 1,
                color: '#228B22',
              },
            }
          },
          data: unit ? gduDegree : gdu,
          type: 'line'
        }, {
          name: '历史平均GDU',
          smooth: true,
          itemStyle: {
            normal: {
              color: '#333',
              lineStyle: {
                width: 1,
                color: '#333',
              },
            }
          },
          data: unit ? avgGduDegree : avgGdu,
          type: 'line'
        }], function (value) {
          return value
        }, false, start ,false), 
        dataZoom: {
          type: 'slider',
          show: false,
          disabled: true,
          xAxisIndex: [0],
          start,
          end,
        },
      })
    return echart
  }
  render() {
    return (
      null
    )
  }
}

Gdu.propTypes = {
  result: PropTypes.object,
  echart: PropTypes.object,
  unit: PropTypes.bool,
  callback: PropTypes.func,
  start: PropTypes.number,
  end: PropTypes.number,
}

export default HighComponent(Gdu, 'gdu')